<html>
<meta charset="utf-8">

<head>
    <script src="jquery-3.2.1.min.js"></script>
    <style>
        li {
            border: 1px groove;
        }
        li.none{
            border:hidden;
        }
    </style>
</head>
<div>
    <h3>padding填充</h3>
    <ul>
        <li>length 固定填充 px pt em</li>
        <li>% 定一个百分比</li>
    </ul>
    <h3>单边填充</h3>
    <ul>
        <li style="padding-left:30px;">左边填充padding-left:30px;</li>
        <li class="none"></li>
        <li style="padding-top:20px">上边填充padding-top:20px</li>
        <li class="none"></li>
        <li style="padding-right:50px;width:200px">右边填充padding-right:50px</li>
        <li class="none"></li>
        <li style="padding-bottom:20px">下边填充padding-bottom:20px</li>
    </ul>
    <h3>填充简写</h3>
    <ul>
        <li>padding:上  右  下  左</li>
        <li class="none"></li>
        <li style="padding:10px 30px 40px 50px;width:500px">padding:10px 30px 20px 50px</li>
    </ul>
</div>

</html>